import { Breadcrumb, Divider, Button, Form, DatePicker, Input, Table, Select, Checkbox, Space, Radio, Modal, Row, Col } from 'antd';
import './index.scss'
import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import request from '../../../../../api/full-reduct_zq'

// import setTime from '../../../../../utils/zhangqiang/setTime'
import moment from 'moment';//引入时间
const { Option } = Select;
const { RangePicker } = DatePicker;

const Newfullreduce = () => {
   
    //   返回 路由跳转
    const navigate = useNavigate()
    // 多选框
    const [value, setValue] = useState();
    // 对话框表格
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    //  获取input框的值 
    const [form] = Form.useForm()
    //获取
    const [modeldata, setmodeldata] = useState('')
    // 满减信息input框

    const [componentSize, setComponentSize] = useState('default');
    // Form表单change事件
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };
    // 选择商品Modal对话框
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 选择商品Modal函数
    const showModal = () => {
        // 发送请求
        setIsModalVisible(true);

    };
    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    useEffect(() => {

        editList()

    }, [])
    // 初始化
    const editList = (record) => {
        console.log(record);
      
        form.setFieldsValue()
        // 初始化渲染model
        request.editfullData().then((res) => {
            console.log(res);
            setmodeldata(res.data)
        })
    }
    // 表头
    const columns = [
        {
            key: 'goodsName',
            title: '商品信息',
            dataIndex: 'goodsName',
        },
        {
            key: 'price',
            title: '价格(元)',
            dataIndex: 'price',
        },
        {
            key: 'inventory',
            title: '库存',
            dataIndex: 'inventory',
        },
        {
            key: 'sales',
            title: '销量',
            dataIndex: 'sales',
        },
    ];
    const data = [];
    // 
    const onFinishstate = () => {

    }

    // 完成查询或重置
    const oncheckFinish = (values) => {
        console.log(values);
    };
    const fullset = () => {
        console.log();
    }

    // 
    const back = () => {
        navigate('/home/market/full-reduct')
    }
    // 对话框内表格
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        // selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // 满减信息1
    const onfullmessage = (e) => {
        console.log(` ${e.target.checked}`);

    };
    // 优惠叠加
    const onChange1 = (e) => {
        // console.log(e.target.value);
    };
    var FormData;
    //     // 提交

    const formsumbit = () => {
        // 如果是ture就进行计算
        FormData = form.getFieldsValue()
        // console.log(form.getFieldsValue());
        let data = '满' + FormData.full + '减' + FormData.jian
        // 转成日期格式
        console.log(FormData);
        FormData.startTime = moment(FormData.time[0]).format('YYYY-MM-DD')
        FormData.endTime = moment(FormData.time[1]).format('YYYY-MM-DD')

        FormData.activityType = ''
        FormData.activityContent = data
        FormData.activityState = ''
        FormData.fullDecreaseId = ''
        delete FormData.time
        delete FormData.full
        delete FormData.jian
        console.log(FormData);
        // 添加发送请求
        request.addfullData(FormData).then((res) => {
            console.log(res);
        })

    }
    // 优化叠加
    const onaddChange = (e) => {
        console.log(e.target.value);
        // FormData.discountOverlay = e.target.value
    };
    // Form表单的宽度设置
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 12,
        },
    };
    // 
    const saleadd = () => {

    }
    // 使用状态
    const onGenderChange = (value) => {
        switch (value) {
            case 'male':
                this.formRef.current.setFieldsValue({
                    note: 'Hi, man!',
                });
                return;

            case 'female':
                this.formRef.current.setFieldsValue({
                    note: 'Hi, lady!',
                });
                return;

            case 'other':
                this.formRef.current.setFieldsValue({
                    note: 'Hi there!',
                });
        }
    }

    return <div className='header'>
        <div className='head-top' >
            <div>
                {/* 面包屑满减 */}
                <div className='sale'>
                    <Breadcrumb>
                        <Breadcrumb.Item>营销</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            满减满折
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            新建满X元减活动
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className='header-left'>新建满X元减活动</div>
            </div>
            <Divider plain></Divider>
            {/* 状态 */}

        </div>
        {/* 表格 */}
        <div className='table-cont'>
            <h3 style={{ padding: '1.25rem' }}>基础信息</h3>
            <div className='table-btn'>
                <div className='table-new'>
                    <div className='activity'>
                        <Form
                            // 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
                            form={form}
                            className='form-table'
                            layout="horizontal"
                            onFinish={formsumbit}
                        // onValuesChange字段值更新时触发回调事件

                        >
                            <Form.Item label="活动名称" name='fullDecreaseName'>
                                <Input placeholder='请输入' style={{ width: '23.125rem' }} />
                            </Form.Item>
                            {/* 时间戳 */}
                            <Form.Item
                                label="活动日期"

                            >
                                <Form.Item
                                    name="time"
                                    validateStatus="error"
                                    labelCol={8}
                                    style={{
                                        width: 'calc(100%)',
                                    }}
                                >
                                    <RangePicker
                                        showTime={{
                                            format: 'HH:mm',
                                        }}
                                        format="YYYY-MM-DD HH:mm"
                                    />
                                </Form.Item>
                            </Form.Item>
                            <Form.Item name="activityContent" >
                                <Form.Item label='满减信息' >
                                    <Checkbox onChange={onfullmessage}>一级优惠</Checkbox>
                                </Form.Item>
                                <Form.Item label='消费满' name='full' rules={[
                                    {
                                        required: true,
                                        message: '请输入金额',
                                    },
                                ]} style={{ padding: '0 .625rem' }}>
                                    <Input suffix="元" placeholder='请输入' />
                                </Form.Item>
                                <Form.Item label='立减' name='jian' rules={[
                                    {
                                        required: true,
                                        message: '请输入金额',
                                    },
                                ]}
                                >
                                    <Input suffix="元" placeholder='请输入' />
                                </Form.Item>
                            </Form.Item>
                            {/* <a>新增下一个优惠等级</a> */}
                            <Form.Item
                                label="优惠叠加"
                                name='discountOverlay'
                                style={{
                                    padding: "0 0 .625rem "
                                }}
                            >
                                <Radio.Group onChange={onaddChange} style={{ margin: '.625rem 0' }}>
                                    <Space direction="vertical">
                                        <Radio value={1}>不可叠加</Radio>
                                        <Radio value={2}>可叠加其他类型的优惠</Radio>
                                    </Space>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item
                                label="适用商品"
                                name='useScope'
                                style={{
                                    margin: "0 0 .625rem  ",
                                    position: 'relative'
                                }}>
                                <Radio.Group onChange={onChange1}>
                                    <Space direction="vertical">
                                        <Radio value={3}>全部商品</Radio>
                                        <Radio value={4}>部分商品</Radio>
                                    </Space>
                                </Radio.Group>
                                <div style={{ position: 'absolute', top: '30px', left: '100px' }}> <a onClick={showModal}>选择商品</a></div>
                                <Modal title="选择商品" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消" width={800} >
                                    {/* 全部分类 input框 */}
                                    <div className='state' style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <Form {...layout} name="control-ref" onFinish={oncheckFinish} layout='inline' labelCol={{ span: 10 }
                                        }>
                                            <Form.Item
                                                name="gender"
                                                label="全部分类"
                                                style={{ width: '300px' }}
                                            >
                                                <Select
                                                    placeholder="请选择商品分类"
                                                    onChange={onGenderChange}
                                                    allowClear
                                                >
                                                    <Option key="1" value="male">全部</Option>
                                                    <Option key="2" value="female">办公用品</Option>
                                                    <Option key="3" value="other">文具用品</Option>
                                                    <Option key="4" value="ear">周边商品</Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="note"
                                            >
                                                <Input placeholder="请输入" />
                                            </Form.Item>
                                        </Form>
                                        <div className='set' style={{ display: 'flex' }}>
                                            <div className='check' style={{ padding: '0 .625rem' }}>
                                                <Button type="primary">查询</Button>
                                            </div>
                                            <Button onClick={fullset}>重置</Button>
                                        </div>

                                    </div>
                                    <Divider />
                                    {/* model表格 */}
                                    <div className='table-cont'>
                                        <Table rowSelection={rowSelection} columns={columns} dataSource={modeldata} pagination={{ pageSize: 5 }} />
                                    </div>
                                </Modal>
                            </Form.Item>
                            {/* 状态 */}
                            <Form.Item
                                name="gender"
                                label="活动状态"
                                style={{ width: '430px' }}
                            >
                                <Select
                                    placeholder="请选择使用状态"
                                    onChange={onGenderChange}
                                    allowClear
                                >
                                    <Option value="1">全部</Option>
                                    <Option value="2">未开始</Option>
                                    <Option value="3">进行中</Option>
                                    <Option value="4">已结束</Option>
                                </Select>
                            </Form.Item>

                            <Form.Item style={{ padding: '.625rem 3.5625rem' }}>
                                <Button type="primary" htmlType="submit" style={{ margin: '0 .625rem', }}>
                                    提交
                                </Button>
                                <Button onClick={back}>返回</Button>
                            </Form.Item>
                        </Form>

                    </div>
                </div>
            </div>
        </div>
    </div>
}


export default Newfullreduce